<template>
  <div class="danmu-panel">
    <VideoSearchSelect @loadData="loadDataVideoSelect"></VideoSearchSelect>
    <TableList
      ref="tableInfoRef"
      :columns="columns"
      :fetch="loadDataList"
      :data-source="tableData"
      :options="tableOptions"
      :ext-height="tableOptions.extHeight"
    >
      <template #slotNickName="{ index, row }">
        <router-link :to="`/user/${row.userId}`" target="_blank" class="nick-name">
          <div class="video-name">{{ row.nickName }}</div>
        </router-link>
      </template>

      <template #time="{ index, row }">
        {{ convertSecondsToHMS(Math.round(row.time)) }}
      </template>

      <template #slotText="{ index, row }">
        <div>{{ row.text }}</div>
        <router-link :to="`/video/${row.userId}`" target="_blank" class="video-info">
          视频：{{ row.videoName }}
        </router-link>
      </template>

      <template #slotOperation="{ index, row }">
        <div @click="delDanMu(row.danmuId)">删除</div>
      </template>
    </TableList>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VideoSearchSelect from './VideoSearchSelect.vue'
import type { Danmu, PaginationResultVO } from '@/services/api/video'
import { ucenterDelDanMuHttpRequest, ucenterLoadDanMuHttpRequest } from '@/services/api/ucenter'
import { convertSecondsToHMS } from '@/utils/utilsFun'
import { confirmMessageBox } from '@/utils/confirm'

interface Column {
  label: string
  scopedSlots?: string
  width?: number
  prop?: string
}
const columns: Column[] = [
  {
    label: '发送者',
    prop: 'nickName',
    width: 150,
    scopedSlots: 'slotNickName'
  },
  {
    label: '播放时间',
    prop: 'time',
    scopedSlots: 'time',
    width: 100
  },
  {
    label: '弹幕内容',
    prop: 'text',
    scopedSlots: 'slotText'
  },
  {
    label: '发送时间',
    prop: 'postTime',
    width: 180
  },
  {
    label: '操作',
    prop: 'operation',
    width: 80,
    scopedSlots: 'slotOperation'
  }
]

const currentVideoId = ref<string>()

const loadDataVideoSelect = (e: string) => {
  currentVideoId.value = e
  loadDataList(e)
}

const tableInfoRef = ref()
const tableOptions = ref({
  extHeight: 10
})

const tableData = ref<PaginationResultVO<Danmu>>()

const loadDataList = async (videoId?: string) => {
  const res = await ucenterLoadDanMuHttpRequest(currentVideoId.value, tableData.value?.pageNo)
  if (!tableData.value) {
    tableData.value = res.data
  } else {
    Object.assign(tableData.value, res.data)
  }
  console.log(res, '表格数据u')
}

const delDanMu = async (danmuId: number) => {
  confirmMessageBox({
    message: '确认要删除该弹幕吗？',
    onConfirm: async () => {
      const res = await ucenterDelDanMuHttpRequest(danmuId)
      loadDataList()
    }
  })
}
</script>

<style lang="less" scoped>
.video-info,
.nick-name {
  margin-top: 5px;
  font-size: 12px;
  color: var(--text3);
  text-decoration: none;
}

.nick-name {
  font-size: 14px;
  color: var(--text2);
}
</style>
